<template>
        <div>
      <!-- 表格 -->
      <el-row>
        <el-table :data="followList" style="width: 100%">
          <!-- prop：对象的属性，只能在el-table-column中使用 -->
          <!-- 如果想在子标签中访问属性，只能通过 #default="scoped" 插槽  scoped简单的理解成 videoList-->
          <el-table-column label="粉丝头像" width="100" #default="scoped" align="center">
            <!-- scoped.row：当前行的对象 -->
            <el-image :src="scoped.row.avatar"></el-image>
          </el-table-column>
          <el-table-column label="粉丝账号" prop="account" align="center">
          </el-table-column>
          <el-table-column prop="time" label="关注时间" width="180" align="center"/>
          <el-table-column label="操作" align="center" #default="scoped">
            <el-button type="primary" @click="follow(scoped.row.uid,scoped.row.fid)" v-if="scoped.row.follow===false">关注</el-button>
            <el-button type="primary" @click="onFollow(scoped.row.uid,scoped.row.fid)" v-else >取消关注</el-button>
            <el-button type="danger" @click="block(scoped.row.uid,scoped.row.fid)">拉黑</el-button>
          </el-table-column>
        </el-table>
      </el-row>
  
      <!-- 分页 -->
      <el-row>
        <el-pagination 
          layout="prev, pager, next, jumper" 
          :total="total" 
          :default-page-size="size"
          @current-change="pageChange"
          />
      </el-row>
    </div>
</template>
<script>

export default{
    data(){
      return{
        page: 1, // 页面
        size: 5, // 每一页多少条数据
        total: 0, // 总条数
        followList: [] // 当前页的视频列表、数据
      }
    },
    mounted(){
      // 页面加载时去查询出第一页的视频信息
      this.getData()
    },
    methods:{
      pageChange(page){
        this.page = page
        //
        this.getData()
      },
      getData(){
        // video/findByUid/1/5    video/findByUid?page=1&size=5&account=xxx
        // `模板字符串`  方便拼接字符串
        this.$axios.get(`myAll/findFollowByUid/${this.page}/${this.size}`).then(res =>{
          // 响应对象：里面包含了状态、数据、响应头
          console.log(res)
          // res.data属性：存放后端返回的数据  ResponseResult 对象
          console.log(res.data)
          // res.data.data：分页信息 ResPage
          console.log(res.data.data)
          // 获取到了分页信息对象
          let resPage = res.data.data
          // 获取总条数
          this.total = resPage.total
          // 获取当前页数据
          this.followList = resPage.data
        })
      },
      follow(uid,fid){  
        this.$axios.get(`myAll/Follow/${uid}/${fid}`).then(res=>{
            if(res.data.code==200){
              this.$message.success("回关成功")
              this.getData()
            }
        })
      },
      onFollow(uid,fid){  
        this.$axios.get(`myAll/onFollow/${uid}/${fid}`).then(res=>{
            if(res.data.code==200){
              this.$message.warning("取关成功")
              this.getData()
            }
        })
      },
      block(uid,fid){
        this.$axios.get(`myAll/Block/${uid}/${fid}`).then(res=>{
            if(res.data.code==200){
              this.$message.success("拉黑成功")
              this.getData()
            }
        })
      }
    }
}
</script>
<style scoped>

</style>